<template>
  <div class="table-div">
    <el-table :data="activities" :empty-text="emptyText"  height="220px" v-loading="loading">
    <el-table-column prop="title" class-name="title" label="活动名称" align="center"></el-table-column>
    <el-table-column prop="time" class-name="title" label="时间" align="center"></el-table-column>
    <el-table-column prop="position" label="地点" width="130px" align="center"></el-table-column>
    <el-table-column prop="source" class-name="title" label="发布人" align="center"></el-table-column>
    <el-table-column prop="people" type="expand" label="人员" align="center" class-name="expand-col">
      <template slot-scope="props">
        <div v-for='(peo, index) in props.row.people' class="people">
          <span>{{ peo.name }}</span>
          <span>*{{ peo.number }}</span>
        </div>
      </template>
    </el-table-column>
    <!--<el-table-column align="center" width="65px">
      <template slot-scope="props">
        <i class="el-icon-share"></i>
      </template>
    </el-table-column>-->
      <el-table-column align="center" prop="aid" width="65px">
        <template slot-scope="scope">
          <i class="el-icon-delete" @click="deleteActivity(scope.row.aid)"></i>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>
<script>
  import axios from 'axios';
  import qs from 'qs';

  export default {
    name: 'Table',
    data(){
      return {
        emptyText: '无'
      }
    },
    props:[
      'activities',
      'loading',
      'isManager'
    ],
    methods:{
      deleteActivity(aid){
        let me = this;
        if(me.isManager) {
          let url = 'http://127.0.0.1:1111/api/activities/delete/' + aid;
          axios({
            method: 'delete',
            url: url,
            withCredentials:true
          }).then(function (response) {
            for(let i=0; i< me.activities.length; i++) {
              if(me.activities[i].aid === aid) {
                me.activities.splice(i,1);
              }
            }
          }).catch(function(err){
            me.$message({
              type: 'info',
              message: '密码错误'
            });
          });
        } else {
          me.$emit('showModal');
        }
      }
    }
  }
</script>
<style>
  .table-div {
    width: 720px;
    background-color: #ffffff;
    margin-top: 33px;
    margin-left: auto;
    margin-right: auto;
    position: relative;
    padding-top: 40px;
    padding-bottom: 40px;
  }
  .table-div >div {

  }
  .table-div th, .table-div td {
    border: none !important;
  }
  .table-div .el-table:before {
    height: 0;
  }
  .table-div .el-icon-delete {
    cursor: pointer;
  }
  .table-div .people {
    display: inline-block;
    width: 33%;
    text-align: left;
    padding-bottom: 10px;
  }
  .el-table__expanded-cell {
    text-align: left;
    padding: 0;
  }
</style>
